<template>
  <Card :shadow="shadow">
    <div class="card-name"><div class="name width1">交易详情</div></div>
    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con">
      <div class="form-item">
        <Row :gutter="24">
          <i-col span="12" v-for="(details, index) in detailsData" :key="index">
            <Row style="padding-top: 15px;">
              <i-col span="8" class="ban-left">{{ details.title }}</i-col>
              <i-col span="16"><i-input v-model="details.value" size="large" readonly></i-input></i-col>
            </Row>
          </i-col>
        </Row>
        <Row :gutter="24" style="padding-top: 15px;">
          <i-col span="12" v-show="payMode === 0 || payMode === 2">
            <Form-item prop="superpass">
              <Row>
                <i-col span="8" class="ban-left">超级密码</i-col>
                <i-col span="16"><i-input v-model="formValidate.superpass" type="password" password size="large" placeholder="请输入超级密码"></i-input></i-col>
              </Row>
            </Form-item>
          </i-col>
          <i-col span="12" v-show="payMode === 1 || payMode === 2">
            <Form-item prop="vcode">
              <Row>
                <i-col span="8" class="ban-left">谷歌验证码</i-col>
                <i-col span="16"><i-input v-model="formValidate.vcode" size="large" placeholder="请输入谷歌验证码"></i-input></i-col>
              </Row>
            </Form-item>
          </i-col>
        </Row>
      </div>
      <Form-item class="ban-btn">
        <i-button @click="auditOk('ok')" :disabled="this.$route.params.row.status == 0 ? false : true" type="info" size="large">审核通过</i-button>
        <i-button @click="auditOk('no')" type="error" :disabled="this.$route.params.row.status == 0 ? false : true" size="large" style="margin: 0 10px;">审核不通过</i-button>
        <i-button class="save" type="default" size="large" @click="btnClick1">返回</i-button>
      </Form-item>
    </i-form>
  </Card>
</template>
<script>
import { mapMutations } from 'vuex'
import { rechargeAudit } from '@/api/merchants'
export default {

  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      payMode: this.$store.state.user.userInfo.pay_safemode,
      value: '',
      modal1: false,
      modal2: false,
      formValidate: {
        superpass: '',
        vcode: ''
      },
      detailsData: [
        {
          title: '交易单号',
          value: this.$route.params.row.order_id
        },
        {
          title: '商户ID',
          value: this.$route.params.row.uid
        },

        {
          title: '交易金额(元)',
          value: this.$route.params.row.price
        },
        {
          title: '入账金额(元)',
          value: (parseFloat(this.$route.params.row.price) - parseFloat(this.$route.params.row.poundage)).toFixed(2)
        },
        {
          title: '手续费(元)',
          value: this.$route.params.row.poundage
        },
        {
          title: '费率',
          value: (this.$route.params.row.poundage / this.$route.params.row.price) * 100 + '%'
        },
        {
          title: '交易状态',
          value: this.$route.params.row.status
        },
        {
          title: '支付成功时间',
          value: this.$route.params.row.pay_time
        },
        {
          title: '创建时间',
          value: this.$route.params.row.add_time
        }
      ],
      s: ''
    }
  },

  created () {
    this.tradeStatus()
  },
  mounted () {
    this.payModeinit()
  },
  methods: {
    // 关闭标签页
    ...mapMutations(['closeTag']),
    close () {
      this.closeTag({
        name: 'off_check',
        params: {
          row: this.$route.params.row
        }
      })
    },
    payModeinit () {
      if (this.payMode === 0) {
        this.ruleValidate.superpass = {
          required: true,
          message: '请输入超级密码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 1) {
        this.ruleValidate.vcode = {
          required: true,
          message: '请输入6位谷歌验证码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 2) {
        this.ruleValidate.superpass = {
          required: true,
          message: '请输入超级密码',
          trigger: 'blur'
        }
        this.ruleValidate.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        }
      }
    },
    tradeStatus () {
      let s = ''
      switch (this.$route.params.row.status.toString()) {
        case '0':
          s = '待处理'
          break
        case '1':
          s = '充值成功'
          break
        case '2':
          s = '充值失败'
          break
      }
      this.detailsData[6].value = s
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
    // 表单验证
    auditOk (type) {
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          let m = type === 'ok' ? '通过' : ' 不通过'
          this.$Modal.confirm({
            title: '确认信息',
            content: '确定操作审核' + m + '该笔充值申请？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
              let data = {
                adminId: this.$store.state.user.userInfo.id,
                id: this.$route.params.row.id,
                auditType: type,
                superpass: this.formValidate.superpass,
                vcode: this.formValidate.vcode
              }
              rechargeAudit(data)
                .then(res => {
                  this.$Message.success(res.msg)
                  setTimeout(() => this.close(), 1000)
                })
                .catch(err => {
                  this.$Message.error(err.msg)
                })
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>
<style lang="less">
.modal-head {
  color: #f60;
  text-align: center;
  font-size: 18px;
}
.modal-cont {
  text-align: center;
  font-weight: bold;
  margin: 20px 0;
  font-size: 14px;
}
</style>
